<template>
    <div>
        <!--查询框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="操作人:">
                <el-select v-model="formInline.operatorCustomerId" placeholder="请选择">
                    <el-option v-for="item in formInline.operatorCustomerId_list" :key="item.code" :value="item.code" :label="item.text"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="通道:">
                <el-select v-model="formInline.type" placeholder="请选择">
                    <el-option v-for="item in formInline.type_list" :key="item.code" :value="item.code" :label="item.text"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="卡id:">
                <el-input v-model="formInline.cardId" placeholder="请输入卡id"></el-input>
            </el-form-item>
            <el-form-item label="日期: ">
                <template>
                    <div class="block">
                        <el-date-picker
                            v-model="times"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions2">
                        </el-date-picker>
                    </div>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <!--表格-->
        <el-table id="logList" :data="tableData" height="500px" max-height="500px" size="500px" :highlight-current-row="true" style="width: 100%" class="c-no-wrap">
            <el-table-column align="center" label="起始id" prop="beginId"></el-table-column>
            <el-table-column align="center" label="结束id" prop="endId"></el-table-column>
            <el-table-column align="center" label="操作人" prop="operateCustomerName"></el-table-column>
            <el-table-column align="center" label="操作类型" prop="type"></el-table-column>
            <el-table-column align="center" label="操作时间" prop="createTime"></el-table-column>
        </el-table>

        <!--分页-->
        <div>
            <pageHelper :current-page="currentPage" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange"></pageHelper>
        </div>

    </div>

</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    import {mytips,timeFormat} from '@/module/tools';
    import pageHelper from '../common/pageHelper';

    document.title='实名列表';
    export default {
        name: 'flowPoolList',
        components: {pagination,pageHelper},
        data() {
            return {
                formInline: {
                    cardId: '',
                    operatorCustomerId: '',
                    operatorCustomerId_list: [
                        {text: '全部',code: ''}
                    ],
                    type: '',
                    type_list: [
                        {text: '全部',code: ''},
                        {text: '出售',code: 'sale'},
                        {text: '停机',code: 'close'},
                        {text: '复机',code: 'open'},
                        {text: '取消测试期',code: 'cancel'},
                        {text: '套餐变更',code: 'updatecombo'},
                        {text: '销户',code: 'stop'},
                        {text: '流量共享',code: 'flowshare'}
                    ]
                },
                //表格数据
                tableData: [],
                totalPage: 0,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: null,
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                times: []
            };
        },

        mounted() {
            this.getAllCustomer();
            this.getData();
        },
        methods: {

            //获取通道
            getAllCustomer() {
                axios({
                    url: API_PATH + '/am/findAllChannel',
                }).then(res => {
                    if (res.data.code == 0) {
                        this.formInline.operatorCustomerId_list = this.formInline.operatorCustomerId_list.concat(res.data.data.map(item => (
                            {
                                text: item.customerName,
                                code: item.customerId
                            }
                        )))
                    }
                })
            },

            /*翻页跳转处理，传入页数*/
            getData: function (page,size) {
                page = page || 1;
                size = size || 10;

                let beginTime = null;
                let endTime = null;
                if (this.times.length > 0) {
                    const startTime = this.times[0];
                    const end = this.times[1];
                    beginTime = timeFormat(startTime,'yyyy-MM-dd hh:mm:ss');
                    endTime = timeFormat(end,'yyyy-MM-dd hh:mm:ss');
                }
                let target = document.getElementById('logList');
                this.loading = this.$loading({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0,1)',
                    target: target,
                    spinner: 'el-icon-loading'
                });
                axios.get(
                    API_PATH + '/cardLog/query',
                    {
                        params: {
                            page: page,
                            size: size,
                            operateCustomerId: this.formInline.operatorCustomerId,
                            type: this.formInline.type,
                            cardId: this.formInline.cardId,
                            beginTime: beginTime,
                            endTime: endTime
                        }
                    }
                ).then(res => {
                        this.loading.close();
                        if (res.data.code == 0) {
                            this.tableData = res.data.data.list;
                            this.totalPage = Math.ceil(res.data.data.total / size);
                            this.total = Math.ceil(res.data.data.total);
                            this.pageSize = size;
                            this.currentPage = page;
                        }
                    },
                    xhr => this.loading.close()
                );
            },
            //每页显示多少条
            handleSizeChange(size) {
                this.pageSize = size;
                this.getData(1,this.pageSize);
            },
            //当前页
            handleCurrentChange(page) {
                this.getData(page,this.pageSize)
            },
        }
    }
</script>
